<template>
  <div>
    <div class="tac" style="margin-top:-10px; background-color:#fff;" v-loading="loading1">
      <div
        style="height:40px;line-height:40px;margin-top:-10px;font-size:18px;
    color: #909399;font-weight: 700;"
      >影院列表</div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" prop="poster" label="海报" width="180">
          <template slot-scope="scope">
            <img style="width:150px;height:106px;;" :src="scope.row.poster" alt />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="180"></el-table-column>
        <!-- <el-table-column align="center" prop="category" label="category" width="180"></el-table-column> -->
        <!-- <el-table-column align="center" prop="director" label="director" width="180"></el-table-column> -->
        <!-- <el-table-column align="center" prop="filmId" label="filmId" width="180"></el-table-column> -->
        <!-- <el-table-column align="center" prop="filmType" label="filmType" width="180"></el-table-column> -->
        <!-- <el-table-column align="center" prop="grade" label="grade" width="180"></el-table-column> -->
        <!-- <el-table-column align="center" prop="language" label="language" width="180"></el-table-column> -->
        <!-- <el-table-column align="center" prop="nation" label="nation" width="180"></el-table-column> -->
        <el-table-column
          align="center"
          prop="premiereAt"
          :formatter="formatter"
          label="创建时间"
          width="180"
        ></el-table-column>
        <el-table-column align="center" prop="runtime" label="影片时长" width="180"></el-table-column>
        <el-table-column align="center" prop="synopsis" label="影片介绍" width="180"></el-table-column>
        <!-- <el-table-column prop="update" label="update" width="180"></el-table-column> -->
        <el-table-column align="center" width="200px" label="操作" v-loading="loading">
          <template slot-scope="scope">
            <el-button @click="removcity(scope)" type="danger" icon="el-icon-delete" circle></el-button>
            <el-button
              @click="changedata(scope.row)"
              type="primary"
              icon="el-icon-edit"
              circle
              style=" margin-left:30px;;"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tac" style="padding:15px 0 15px; ">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      list: [],
      total: 0,
      loading: false,
      loading1: true
    };
  },
  methods: {
    formatter(row, column, cellValue, index) {
      return this.getTime(cellValue);
    },
    getTime(time) {
      let date = new Date(time);
      let year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      if (isNaN(year)) {
        return "未填写时间";
      } else {
        return `${year}-${month}-${day}`;
      }
    },
    changedata(data) {
      this.$router.push({ path: "/film/add", query: { data: data } });
      // this.$router.push( {name:'影片编辑',params:data});
    },
    removcity(scope) {
      this.loading = true;
      let index = scope.$index;

      this.$confirm("您确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            filmId: scope.row.filmId
          };
          let url = "film/delById";
          this.$axios
            .post(url, data)
            .then(res => {
              this.$message.success("删除影片信息成功");
              this.tableData.splice(index, 1);
            })
            .catch(err => {
              this.$message.error("删除错误");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    formatters(row, column, cellValue, index) {
      return cellValue ? "是" : "否";
    },
    handleSizeChange(num) {
      this.getList(num);
    },

    handleCurrentChange(num) {
      this.getList(num);
    },
    getList(num) {
      let url = "/film/getList?pageNum=" + num;
      this.$axios
        .get(url)
        .then(res => {
          this.tableData = res.films;
          this.total = res.total;
          this.loading1 = false;
        })
        .catch(err => {
          this.$message.error("数据获取错误");
          this.loading1 = false;
        });
    }
  },
  created() {
    this.getList();
  }
};
</script>